<template>
  <div class="register_container">
    <div class="register_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img class="png" src="../assets/2.jpg" alt />
      </div>
      <!-- 
            登录表单区域
      -->
      <el-form
        :model="registerform"
        status-icon
        :rules="registerformrules"
        ref="registerform"
        label-width="100px"
        class="registerform"
      >
        <el-form-item label="用户" prop="username">
          <el-input v-model="registerform.username"></el-input>
        </el-form-item>

        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerform.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerform.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="checknumber" class="checknumber">
            <el-input v-model="registerform.checknumber"></el-input>
            <el-button type="warning" style="float:right;margin-right:-90px;" @click="getnumber">获取</el-button>
        </el-form-item>

        

        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="submit()">提交</el-button>
        </el-form-item>
      </el-form>

    </div>
    <AlertTip :alertText="alertText" v-show="showAlert" @closeTip="closeTip"/>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import AlertTip from '../components/AlertTip'
import {reqPwdRegister,reqGetCode,reqReset} from '../api'

export default {
  components:{
    AlertTip
  },
  data() {
  
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerform.checkPass !== "") {
          this.$refs.registerform.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      //登录表单的数据对象
      registerform: {
        username: "",
        email: "",
        checknumber:"",
        password: "",
      },

      alertText:null,
      showAlert:false,
     
      //表单的验证规则
      /*
      registerformrules: {
        username: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],

        password: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        checknumber: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],

        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      */
      //用户id
      id:0
      
    };
  },
  computed:{
    rightEmail(){
      return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.email)
    }
  },
  methods: {
    
    ...mapActions([
      'recordUserInfo'
    ]),
    open(str) {
      this.$message({
          message: str,
          type: 'success',
          center: true,
      })
    },
    async submit() {
      console.log(this.registerform)

      const datalist= JSON.parse(JSON.stringify(this.registerform));

      console.log(datalist)
      console.log(datalist.username)
      if(!datalist.username){
        
          this.alertOut('请输入用户名')
          return
      }else if(!datalist.email){
        this.alertOut('请输入邮箱')
        return
      }else if(!datalist.checknumber){
        this.alertOut('请输入验证码')
        return
      }

      const result=await reqReset(datalist.email,datalist.password,datalist.checknumber)
      console.log('00000000')
      console.log(result)

      if(result.error_code===0){
        //显示
        this.open('重置成功！')
        //成功
        console.log(result)
        console.log(result.userid)
        this.id=result.userid
        console.log(this.id)
        //跳转页面
        // this.$router.replace('/login')
        this.showInfo=true
      }else{
        //失败
        
        this.alertOut("验证码错误")
      }
    },

    

    alertOut(str){
      this.showAlert = true
      this.alertText = str
    },
    closeTip() {
      this.showAlert = false
      this.alertText=''
    },
    getnumber(){
      const result=reqGetCode(this.registerform.email)
      console.log(result)
    }
  },
};
</script>
<style>
.register_container {
  height: 100%;
  background-color: antiquewhite;
}
.register_box {
  width: 600px;
  height: 430px;
  background-color:rgb(228, 228, 230);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -40%);
  background-color: #fff;
}
.avatar_box .png {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.registerform {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.el-input{
    width: 90%;
}
.checknumber{
    width: 70%;
}
</style>